<template>
  <div class="danye">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>酒品管理</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="mar-top">
      <el-button
        style="margin-right: 1rem"
        type="primary"
        @click="showAddDialog"
        >添加酒品</el-button
      >
      <el-input
        v-model="searchKeyword"
        placeholder="请输入搜索关键字"
        style="width: 200px; margin-bottom: 10px"
        clearable
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="handleSearch"
        ></el-button>
      </el-input>
    </div>
    <el-table :data="wines" style="width: 100%">
      <el-table-column prop="wname" label="名称"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="origin" label="产地"></el-table-column>
      <el-table-column prop="vintageYear" label="年份"></el-table-column>
      <el-table-column prop="alcoholContent" label="酒精含量"></el-table-column>
      <el-table-column prop="volumeMl" label="容量（ml）"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="stockQuantity" label="库存"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="图片" prop="heiImage">
        <template slot-scope="scope">
          <!-- :src="scope.row.imageUrl.split(',')[0]" -->
          <el-image
            style="width: 50px; height: 50px"
            :src="scope.row.heiImage"
            :preview-src-list="[scope.row.heiImage]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column prop="updatedAt" label="更新时间"></el-table-column>
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button size="mini" @click="editWine(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteWine(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-dialog
      :visible.sync="dialogVisible"
      title="添加/编辑酒"
      @close="handleCloseDialog"
    >
      
    </el-dialog> -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="current"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
import { winelist, addWine, deleteWine, updateWine } from "@/api/wine";
import { Message } from 'element-ui';
export default {
  data() {
    return {
      wines: [], // 在这里初始化你的酒品数据
      dialogVisible: false,
      current: 1,
      size: 10,
      total: 0,
      searchKeyword: "",
      currentWine: {},
    };
  },

  created() {
    // 在组件创建时加载酒品数据
    this.loadWines();
  },
  methods: {
    handleSizeChange(val) {
      this.current = val;
    },
    handleCurrentChange(val) {
      this.size = val;
    },
    // 关闭对话框
    handleCloseDialog() {
      this.dialogVisible = false;
    },
    editWine(wine) {
      // 编辑酒品的逻辑
       this.mode = "edite";
      this.$router.push({ name: 'add', params: { currentWine: { ...wine } ,mode:this.mode} })
      
    },
  async  deleteWine(wine) {
      // 删除酒品的逻辑
      console.log("删除酒品", wine);
  
      const res=await deleteWine(wine.wineId);
      if(res.code==200){
       Message(res.message||"删除成功")
       this.loadWines()
      }else{
        Message(res.message||"删除失败")
      }
    },
    handleSearch() {
      this.loadWines(this.searchKeyword);
    },
    showAddDialog() {
      this.mode="add"
      this.$router.push({ name: 'add',params:{mode:this.mode}})
    },
    async loadWines(searchKeyword) {
      // 在这里调用接口或者从后端获取酒品数据
      // 示例数据，实际应该从后端获取
      const param = {
        categoryId: this.categoryId,
        current: this.current,
        size: this.size,
        searchKeyword: searchKeyword,
      };
      const res = await winelist(param);
      this.wines = res.data.list.records;
      this.current = res.data.list.current;
      this.size = res.data.list.size;
      this.total = res.data.list.total;
    },
  },
};
</script>

<style scoped>
/* 在这里添加组件的样式 */
</style>
